<template>
  <div class="me_search">
    <el-tag
      v-for="(tag, index) in dataList"
      :key="index"
      :disable-transitions="false"
      class="tag"
      @close="handleCloses(tag)"
    >
      {{ tag.label }}
    </el-tag>
    <el-button
      size="mini"
      round
      circle
      icon="el-icon-plus"
      @click="dialogVisibles()"
      @childFn="parentFn"
    />

    <el-dialog
      title="添加部门"
      :visible.sync="dialogVisible"
      class="small"
      height="50%"
      :before-close="handleClose"
    >
      <div class="box">
        <div class="left">
          <div class="left-top">
            <div class="inputDeep">
              <el-input
                v-model="input"
                v-input
                placeholder="搜索名字"
              />
            </div>
            <div class="button">
              <el-tag
                v-for="(tag, index) in dataList"
                :key="index"
                closable
                :disable-transitions="false"
                class="tag"
                @close="handleCloses(tag)"
              >
                {{ tag.label }}
              </el-tag>
            </div>
          </div>
          <div class="left-but">
            <el-button
              type="primary"
              @click="dialogVisible = false"
            >确 定</el-button>
            <el-button @click="handleClose">取 消</el-button>
          </div>
        </div>
        <div class="right">
          <el-collapse v-model="activeNames" accordion :class="{ itembox: itembox }" class="collapse">
            <el-collapse-item name="1">
              <template slot="title">
                <i class="iconfont header-icon el-icon-allzuzhijiagou4" />
                <p class="p1">组织架构</p>
              </template>
              <div
                v-for="(item2, index2) in classifyList"
                :key="index2"
                class="classif"
                @click="goclassif(index2)"
              >
                <i class="i1 iconfont" :class="item2.icon" />
                <p class="p2">{{ item2.name }}</p>
              </div>
            </el-collapse-item>
          </el-collapse>
          <div class="content" :class="{ goclassif: isActive }">
            <p class="p3" @click="toclassif">
              <i class="el-icon-arrow-left i3" /> 组织架构
            </p>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item
                v-for="(item, index) in breadcrumb"
                :key="item.id"
              ><span @click="goTo(item.id, index)">{{
                item.label
              }}</span></el-breadcrumb-item>
            </el-breadcrumb>
            <el-table
              ref="tableData"
              height="35vh"
              :data="getdata"
              style="width: 100%"
              :show-header="false"
              @cell-click="click"
              @selection-change="handleSelectionChange"
            >
              <!-- :selectable="checkboxT" -->
              <el-table-column

                type="selection"
                width="55"
              />
              <el-table-column>
                <template slot-scope="scope">
                  <div class="templateClass">
                    <span>
                      {{ scope.row.label }}
                    </span>
                    <i
                      v-if="scope.row.children != null"
                      class="iconfont el-icon-allxiayiji i4"
                    />
                  </div>
                  <!-- <i class="el-icon-arrow-down"></i> -->
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer" />
    </el-dialog>
  </div>
</template>

<script>
import { getBranchList } from '@/api/uc/search.js'

import '@/styles/search.scss'
export default {
  components: {},
  data() {
    return {
      dialogVisible: false,
      classifyList: [
        { id: '1', name: '部门', icon: 'el-icon-alltuanduiguanli' }
      ],
      groupUserTree: [],
      roleUserTree: [],
      getdata: [],
      itembox: false,
      isActive: true,
      dataList: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      permissionIds: [],
      input: '',
      breadcrumb: [],
      dataList: [],
      terrData: [],
      checkedGh: [],
      activeNames: ['1']
    }
  },
  mounted() {
    this.getsearch()
  },
  methods: {
    dialogVisibles() {
      this.dialogVisible = true
      this.breadcrumb = []
    },

    get() {
      console.log(this.data)
    },
    getMsgFormSon(data) {
      this.dataList = data
    },
    handleClose(done) {
      this.dataList = ''
      this.dialogVisible = false
    },
    parentFn(payload) {
      this.dataList = payload
    },
    // //////
    goclassif(index) {
      this.isActive = false
      this.itembox = true
      if (index === 1) {
        this.getdata = this.roleUserTree
        this.terrData = this.roleUserTree
      } else if (index === 0) {
        this.getdata = this.groupUserTree
        this.terrData = this.groupUserTree
      }
    },
    toclassif() {
      this.isActive = true
      this.itembox = false
      this.breadcrumb = []
    },
    //
    // 搜索
    // querySearchAsync(queryString, cb) {
    //      if(Verify(queryString)==true){
    //       return
    //     }
    //   clearTimeout(this.timeout)

    //   this.timeout = setTimeout(() => {
    //     searchUserByKeyword({
    //       pageIndex: 0,
    //       pageSize: 1,
    //       userName:queryString
    //     }).then((res) => {
    //       res.data.forEach(item=>{
    //         item.value=item.userName
    //       })
    //       cb(res.data)
    //     })

    //   }, 1000 * Math.random())
    //   console.log(queryString, 'ppppppp')
    // },
    //     handleSelect(item) {
    //     this.input=''
    //     this.dataList.push({id:item.userId,label:item.userName})
    //   },
    // 获取数据
    async getsearch() {
      const getdataList = await getBranchList()
      this.groupUserTree = getdataList.data.groupUserTree
    },
    // // 绑定
    // // getCheckedKeys() {
    // //   const list = this.$refs.tree.getCheckedNodes()
    // //   console.log(list)
    // //   this.dataList = [...this.dataList, ...list]
    // // },
    // // 树回调
    // handleCheckChange() {
    //   const getdataList = this.$refs.tree.getCheckedNodes()
    //   getdataList.forEach((item) => {})

    //   // if (getdataList.children != null) {
    //   //   console.log(1111)
    //   // }
    //   this.dataList = this.$refs.tree.getCheckedNodes()
    // },
    // tag回调
    handleCloses(tag) {
      this.$refs.tableData.toggleRowSelection()
      this.dataList.splice(this.dataList.indexOf(tag), 1)
    },
    click(row) {
      if (row.children) {
        this.getdata = row.children
        // this.checkboxT(this.getdata)
        this.breadcrumb.push({ label: row.label, id: row.id })
      }
    },

    checkboxT(row) {
      if (row.person == false) {
        return false
      } else {
        return true
      }
    },
    handleSelectionChange(selection) {
      console.log(selection)
      this.dataList = selection
      if (selection.length > 1) {
        this.$refs.tableData.clearSelection()
        this.$refs.tableData.toggleRowSelection(selection.pop())
      }
      this.$emit('receiveUserGroupData', selection)
    },
    goTo(id, index) {
      const idl = id
      this.getItem(idl, this.terrData)
      var flag = true
      for (var i = this.breadcrumb.length - 1; i >= 0; i--) {
        if (this.breadcrumb[i].id === idl) {
          flag = false
        }
        if (flag) {
          this.breadcrumb.splice(i, 1)
        }
      }
      //  .push({ label: this.getdata.label, id: this.getdata.id })
    },
    // 递归树
    getItem(id, data) {
      for (const dat in data) {
        const e = data[dat]
        if (e.id === id) {
          this.getdata = e.children
          return
        }
        if (e.children) {
          this.getItem(id, e.children)
        }
      }
    }
  }
}
</script>
